<!DOCTYPE html>
<html>

	<head>
		<title></title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<link href="__STATIC__/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
		<script type="text/javascript" src="__STATIC__/jquery-2.1.3.js"></script>
		<style>
			body {margin: 0;}
			label {color: grey;}
			code {display: none;}
			.highlight {
				border: 1px solid #e1e1e8;
				background: #fff;
				border-radius: 4px;
				margin: 15px 0;
				padding: 15px 0 0;
			}
			.m-15{margin: -15px;}
			.pt5 {padding-top: 5px;}
			.alert {margin-bottom: 0;}
			/*合作信息*/
			.cooper-type-div{
				margin: 4px 0;
			}
			.cooper-type-div .active{
				background: rgba(204,204,204,.4);
			}
			.cooper-type-div > div{
				border: 1px solid rgba(204,204,204,.2);
				display: inline-block;
				width: 80px;height: 30px;
				line-height: 30px;
				text-align: center;
				box-sizing:content-box;
				margin-left: 0;
			}
			.newcooper-div{border: 1px solid rgba(245,245,245,.8);margin-bottom: 15px;}
			.logo{margin:10px 0;}
			.logo-div{display: inline-block;width: 80px;height: 80px;margin:5px 0 10px 10px;text-align: center;line-height: 80px;}
			.logo-span{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;margin: 0;font-size: 1rem;line-height: normal!important;}
			.logo-img{margin-bottom: 4px;width: 100%;height: auto;}
		</style>
	</head>

	<body>
		<!-- top -->
		<div class="container">
			<div class="row">
				<!-- right -->
				<div class="col-xs-12">
					<div class="row" style="margin:15px 0;">
						<div id="actTips" class="col-xs-12 alert alert-info">
							<h4>小秘书提示：</h4>
							<p>正在编辑活动合作中</p>
						</div>
					</div>
					<div class="row highlight form-horizontal" style="padding:5px 10px;">
						<!-- 活动表单 begin -->
							<input type="hidden" name="img_save" id="img_save" value="0" />
							<!-- 风格类型 -->
							<div class="form-group">
								<label for="title" class="col-xs-2 control-label">活动风格类型：</label>
								<div class="col-xs-6">
									<input type="text" class="form-control" name="type" id="type" placeholder="请填写风格类型" value="{$act.type}" readonly>
								</div>
							</div>
							<!-- 活动主题 -->
							<div class="form-group">
								<label for="title" class="col-xs-2 control-label">活动主题：</label>
								<div class="col-xs-6">
									<input type="text" class="form-control" name="title" id="title" placeholder="请填写活动主题" value="{$act.title}" readonly>
								</div>
							</div>
							<!--活动图片预览-->
							<!--<div class="form-group" id="img_preview">
								<label for="title" class="col-xs-2 control-label">主题图片：</label>
								<div class="col-md-7">
									<div class="row">
										<div class="col-md-10">
											<div id="theme-a"><img src="{$act.theme}" style="width: 100%;"/></div>
											<div class="img-container">
												<img id="showimg">
											</div>
										</div>
									</div>
								</div>
							</div>-->
							<!-- 详细地址 -->
							<div class="form-group">
								<label for="address" class="col-xs-2 control-label">活动地点：</label>
								<div class="col-xs-6">
									<input class="form-control" id="address" name="address" value="{$act.address}" placeholder="例（广州天河区体育中心**大道002号）" readonly>
								</div>
							</div>

							<!-- 活动时间 -->
							<div class="form-group">
								<label for="atime" class="col-xs-2 control-label">活动时间：</label>
								<div id="sdtp" class="col-xs-6 input-group date" style="padding-left: 14px; padding-right: 10px;">
									<input type="text" class="form-control" id="atime" name="atime" value="{$atime}——{$aetime}" placeholder="请选择活动开始时间" readonly>
								</div>
								<div class="col-xs-3 pt5"><code id="atime_err"></code>
								</div>
							</div>
							<!--活动合作-->
							<div class="form-group">
								<label for="remark" class="col-xs-2 control-label">活动合作：</label>
								<div class="col-md-9">
									<h5>合作信息(logo比例：1：1)</h5>
									<div class="cooper-type-div">
										<div class="cooper-type text-align-center active" data-img="changdi" onclick="selectt(this)"  style="float: left;" >场地</div>
										<div class="cooper-type text-align-center" data-img="hezuo" onclick="selectt(this)">合作方</div>
									</div>
									<div class="logo" id="changdi">
										<notempty name="cooper">
										<foreach name="cooper" item="v">
											<if condition="$v.type eq 1">
											<div class="logo-div">
												<img class="logo-img" src="{$v.logourl}" />
												<p class="logo-span">{$v.name}</p>
												<div class="m-15">
													<button class="btn btn-danger" data-id="{$v.id}" onclick="delectlogo(this)">删除</button>
												</div>
											</div>
											</if>
										</foreach>
										<else/>
							            	<span class="text-center">暂无数据！！！</span>
										</notempty>
									</div>
									<div class="logo" id="hezuo" hidden="hidden">
										<notempty name="cooper">
										<foreach name="cooper" item="v">
											<if condition="$v.type eq 2">
											<div class="logo-div">
												<img class="logo-img" src="{$v.logourl}" />
												<p class="logo-span">{$v.name}</p>
												<div class="m-15">
													<button class="btn btn-danger" data-id="{$v.id}" onclick="delectlogo(this)">删除</button>
												</div>
											</div>
											</if>
										</foreach>
										<else/>
							            	<span class="text-center">暂无数据！！！</span>
							            </notempty>
									</div>
									
								</div>
							</div>
							<form action="{:U('Activity/add_cooper')}" method="post" id="formUrl" class="form-horizontal" enctype="multipart/form-data">
								<input type="hidden" name="aid" value="{$act.id}" />
								<div class="newcooper-div" id="newcooper" hidden="hidden">
									<!--增加活动合作-->
									<div class="form-group" style="margin-top: 20px;" >
										<label for="title" class="col-xs-2 control-label">合作方logo：</label>
										<div class="col-xs-6">
											<input type="file" name="logourl" class="form-control" id="logourl">
										</div>
									</div>
									<div class="form-group">
										<label class="col-xs-2 control-label">logo预览：</label>
										<div class="col-xs-6">
											<img id="newlogo" style="width: 80px;height: auto;" />
										</div>
									</div>
									<div class="form-group" style="margin-top: 20px;" >
										<label for="title" class="col-xs-2 control-label">合作类型：</label>
										<div class="col-xs-6">
											<select id="type" name="type" style="height: 30px;">
												<option value="1">场地方</option>
												<option value="2">合作方</option>
											</select>
										</div>
									</div>
									<div class="form-group" style="margin-top: 20px;" >
										<label for="title" class="col-xs-2 control-label">合作方名称：</label>
										<div class="col-xs-6">
											<input class="form-control" id="name" name="name" placeholder="如广州红中文化发展有限公司"/>
										</div>
									</div>
									<button class="btn btn-success" id="confirm" type="button" style="margin: 20px 160px;">确认</button>
									<button class="btn btn-default" id="cancel" type="button" style="margin: 20px 160px;">取消</button>
								</div>
							</form>		
							<!--增加活动合作结束-->
							<div class="form-group">
								<div class="col-xs-6 col-xs-offset-2">
									<button id="add" class="form-control btn btn-primary" type="button">新增合作</button>
								</div>
							</div>
					</div>
				</div>
			</div>
		</div>

	</body>
	<script>
		$('#add').click(function(){$('#newcooper').show();});
		$('#cancel').click(function(){$('#newcooper').hide();});
		//删除合作方获场地方
		function delectlogo(o){
			var con = confirm("是否真要删除此项合作信息");
			if(con){
				var logoid = $(o).attr('data-id');
				$.post("{:U('Activity/delete_cooper')}",{id:logoid},function(res){
					if(res){window.location.reload();}
					else{alert('删除失败')}
				});
			}else{
				return false;
			}
		}
		//确认增加一项合作信息
		$('#confirm').click(function(){
			var logo = $('#newlogo').attr('src');
			if(logo){
				$('#formUrl').submit();
			}else{
				alert('请选择合作方logo');
				return false;
			}
		});
		//新增合作方预览logo效果
		$('#logourl').change(function(){
			var objurl = getObjectURL(this.files[0]);
			if(objurl){
				$('#newlogo').attr('src',objurl);
			}
		});
		/**
		 * 预览图片
		 */
		function getObjectURL(file) {
			var url = null;
			if (window.createObjectURL != undefined) { // basic
				url = window.createObjectURL(file);
			} else if (window.URL != undefined) { // mozilla(firefox)
				url = window.URL.createObjectURL(file);
			} else if (window.webkitURL != undefined) { // webkit or chrome
				url = window.webkitURL.createObjectURL(file);
			}
			return url;
		}
		//合作方，场地方logo切换
		function selectt(o){
			$('.cooper-type').removeClass('active');
			$(o).addClass('active');
			var data = $(o).attr('data-img');
			if(data=="changdi"){
				$('#hezuo').hide();
				$('#changdi').show();
			}else{
				$('#changdi').hide();
				$('#hezuo').show();
			}
		}
	
	</script>

</html>

